<template>
    <div class="main">
        <el-container>
            <!-- <el-header>
                <el-card>
                    信息:这是一条信息
                </el-card>
            </el-header> -->

            <el-container>
                <el-aside width="30%" style="background: none;">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>个人信息</span>
                        </div>
                        <div>
                            <div class="text-center">
                                <userAvatar :user="user" />
                            </div>
                            <ul class="list-group list-group-striped">
                                <li class="list-group-item">
                                    <svg-icon icon-class="user" />账号
                                    <div class="pull-right">{{ user.userName }}</div>
                                </li>
                                <li class="list-group-item">
                                    <svg-icon icon-class="email" />姓名
                                    <div class="pull-right">{{ stuName }}</div>
                                </li>
                                <li class="list-group-item">
                                    <svg-icon icon-class="tree" />班级
                                    <div class="pull-right">{{ own_class }}
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <svg-icon icon-class="peoples" />角色
                                    <div class="pull-right">{{ roleGroup }}</div>
                                </li>
                                <li class="list-group-item">
                                    <svg-icon icon-class="date" />创建日期
                                    <div class="pull-right">{{ user.createTime }}</div>
                                </li>
                            </ul>
                        </div>
                    </el-card>
                </el-aside>
                <el-main style="padding: 10px;">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>综合成绩记录</span>
                        </div>
                        <el-table v-loading="loading" :data="record_list" style="width:100%">
                            <el-table-column prop="stuYearName" label="学年" align="center" />
                            <el-table-column prop="typeName" label="项目" align="center" />
                            <el-table-column prop="score" label="分数" align="center" />
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="lookVClick(scope.row)" size="mini"
                                        v-if="scope.row.typeName == '思想品德'"> 查看明细</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination :pageSizes="[5]" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="listOwnFive" />
                    </el-card>
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>综合素质评价成绩</span>
                        </div>
                        <el-table :data="tableData" style="width:100%">
                            <el-table-column prop="stuYearName" label="学年" align="center"/>
                            <el-table-column prop="totalScore" label="综合素质评分" align="center"/>
                            <el-table-column prop="classRank" label="班级排名" align="center"/>
                            <el-table-column prop="majorRank" label="专业排名" align="center"/>
                        </el-table>
                    </el-card>

                </el-main>
            </el-container>
        </el-container>



        <el-dialog :visible.sync="lookV" title="明细">
            当前学年思想品德总分(最大不超过100分) = (当前学年思想品德明细的总和) + (思想品德初始分数80分)
            <el-table :data="own_record_list">
                <el-table-column prop="stuYearName" label="学年" align="center" />
                <el-table-column prop="ruleName" label="项目" align="center" />
                <el-table-column label="分数" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.recordScore > 0 ? '+' + scope.row.recordScore.toString() : scope.row.recordScore }}
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="详情" align="center" />

            </el-table>
        </el-dialog>



    </div>
</template>
<script>
import userAvatar from "@/views/system/user/profile/userAvatar";
import { getUserProfile, getSutCq } from "@/api/system/user";
import { listOwnRecord, getOwn, listOwnFive } from "@/api/stuCQS/info-fill/cqScore";
import dayjs from "dayjs";
import { getOwnRecord } from "@/api/stuCQS/info-fill/iam";
import { getOwnClass } from "@/api/stuCQS/basedata/student";

export default {
    name: "stuCQS_index",
    components: { userAvatar },
    data() {
        return {
            user: {},
            roleGroup: {},
            postGroup: {},
            activeTab: "userinfo",
            // 学
            tableData: [],

            queryParams: {
                pageNum: 1,
                pageSize: 5,
            },

            record_list: [],
            total: 0,
            loading: false,
            dayjs,

            ownRecordParams: {
                pageNum: 1,
                pageSize: 10,
            },
            own_record_list: [],
            own_record_total: 0,
            lookV: false,
            own_class: "",
            stuName:""
        }
    },
    created() {
        this.getUser();
        this.getOwnClass();
        //this.getStuCqSore();
        //this.listOwnRecord();
        this.getOwn();
        this.listOwnFive();
    },
    methods: {
        async getOwnClass() {
            let res = await getOwnClass();
            
            if (res.code == 200) {
                this.own_class = res.data.className;
                this.stuName = res.data.stuName;
            }
        },
        async lookVClick(row) {
            let year = row.stuYearName;
            let res = await getOwnRecord(year, this.ownRecordParams);
            if (res.code == 200) {
                this.own_record_list = [...res.rows];
                this.own_record_total = res.total;
                this.lookV = true;
            }
        },
        async listOwnFive() {
            this.loading = true;
            let res = await listOwnFive(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.record_list = [...res.rows];
                this.total = res.total;
            }
        },

        async getOwn() {
            let res = await getOwn();
            if (res.code == 200) {
                this.tableData = [...res.data];
            }
        },
        async listOwnRecord() {
            this.loading = true;
            let res = await listOwnRecord(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.record_list = [...res.rows];
                this.total = res.total;
            }
        },

        getUser() {
            getUserProfile().then(response => {
                this.user = response.data;
                this.roleGroup = response.roleGroup;
                this.postGroup = response.postGroup;
            });
        },
        getStuCqSore() {
            getSutCq().then(response => {
                console.log("开始");
                console.log(response.data);
                this.tableData = response.data;
            });
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    padding-top: 10px;
}
</style>